<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./src/Itcast.core.js"></script>
    <script src="./src/Itcast.dom.js"></script>
    <script src="./src/Itcast.event.js"></script>
    <script src="./src/Itcast.style.js"></script>
    <script>
        Itcast.fn.attr = function ( attrName, attrValue ) {
            if ( attrValue === undefined ) {
                // 获得
                // 获得 this 中 第 0 个 DOM 元素 对应属性的值
                // return this[ 0 ].getAttribute( attrName ); // 为什么获取不到值? 
                // 获得不到这个属性, 应该使用 点语法来获取
                return this[ 0 ].getAttribute( attrName ) || this[ 0 ][ attrName ];

            } else {
                // 设置
                // 设置 this 中每一个 DOM 元素的 对应属性的值
                return  this.each(function () {
                    // this.setAttribute( attrName, attrValue );

                    // 如果 传入的是 checked 等单属性, 那么如果设置为 false
                    // 使用 setAttribute 是无法移除该属性值的, 应该使用 HTML-DOM 方法
                    // DOM-Core 是说 核心 DOM, 使用 通用的方法解决 DOM 问题, 代表语法就是 setAttribute 和 getAttribute
                    // HTML-DOM 是针对 HTML 实现的快捷处理办法, 可以直接使用点 来对属性进行读写操作, 就是为了方便.
                    // 如果传入的 value 是 bool 值, 那么说明其操作应该是 点语法
                    if ( typeof attrValue == 'boolean' ) {
                        this[ attrName ] = attrValue;
                    } else {
                        this.setAttribute( attrName, attrValue );
                    }
                });
            }
        } 
    </script>
</head>
<body>
    <br>
    <a href=""></a>
    <input type="checkbox"><br>
    <img src="" alt="">
</body>
<script>
    I( 'img' ).attr( 'src', 'http://pic38.nipic.com/20140228/3822951_135521683000_2.jpg' );

    I( 'a' ).attr( 'href', 'http://www.itcast.cn').each(function () {
        this.innerHTML = '传智播客';
    });

    I( 'input' ).attr( 'checked', true );
    // I( 'input' ).attr( 'checked', false );


    console.log( 'src = ' + I( 'img' ).attr( 'src' ) );
    console.log( 'href = ' + I( 'a' ).attr( 'href' ) );
    console.log( 'checked = ' + I( 'input' ).attr( 'checked' ) );

    I( 'input' ).attr( 'checked', false );

    console.log( 'checked = ' + I( 'input' ).attr( 'checked' ) );

</script>
</html>